$(function () {
  // 添加消息提示
  function addTip(content, type) {

    var time = new Date().getTime();
    // 获取最后消息提示元素的高度
    var top = $(".tip:last").attr("data-top") == undefined ? 0 : $(".tip:last").attr("data-top");
    // 如果产生两个以上的消息提示，则出现在上一个提示的下面，即高度添加
    var lastTop = parseInt(top) + ($(".tip").length > 0 ? $(".tip:last").outerHeight() + 17 : 20);

    if (type == "success" || type == 1) {
      $("#page-wraper").append(`<div class="tip tip-success ${time}" style="top: ${parseInt(top)}px" data-top="${lastTop}"><i class="iconfont icon-dagouyouquan icon"></i><p class="tip-success-content">${content}</p></div>`);
    } else if (type == "danger" || type == 2) {
      $("#page-wraper").append(`<div class="tip tip-danger ${time}" style="top: ${parseInt(top)}px" data-top="${lastTop}"><i class="iconfont icon-cuowu icon"></i><p class="tip-danger-content">${content}</p></div>`);
    } else if (type == "info" || type == 3) {
      $("#page-wraper").append(`<div class="tip tip-info ${time}" style="top: ${parseInt(top)}px" data-top="${lastTop}"><i class="iconfont icon-info icon"></i><p class="tip-info-content">${content}</p></div>`);
    } else if (type == "warning" || type == 4) {
      $("#page-wraper").append(`<div class="tip tip-warning ${time}" style="top: ${parseInt(top)}px" data-top="${lastTop}"><i class="iconfont icon-gantanhao icon"></i><p class="tip-warning-content">${content}</p></div>`);
    }

    // 动画往下滑动
    $("." + time).animate({
      top: parseInt(lastTop) + "px",
      opacity: "1",
    })

    // 消息提示 3 秒后隐藏并被删除
    setTimeout(() => {
      $("." + time).animate({
        top: "0px",
        opacity: "0",
      });

      setTimeout(() => {
        $("." + time).remove();
      }, 3000);
    }, 3000);
  }
})